<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <link rel="stylesheet" href="/public/bootstrap.min.css">
  <link rel="stylesheet" href="/public/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/style-light.css">
  
  <script src="/public/jquery.min.js"></script>
  <script src="/public/dayjs.min.js"></script>
  <script src="/public/bootstrap.bundle.min.js"></script>
  <script src="/public/util.js"></script>
  
  <title>Infomation - localtags</title>
</head>
<body>
  <div id="root" class="container" style="max-width: 775px; min-width: 400px;"></div>
  <script>

const Alerts = CreateAlerts();

const [InfoBtn, InfoMsg] = CreateInfoPair('使用说明', m('ul').append([
  m('li').text('每隔一段时间（默认 30 天，可自由设置）会自动校验一次，因此一般不需要点击 force check 按钮。'),
  m('li').text('但只有上传文件时才会触发自动校验，如果长期（比如半年）没有上传新文件，则需要点击 force check 按钮强行校验。'),
  m('li').text('要注意，当文件较多时，强制校验需要等待很长时间，建议尽量不要执行强制校验。'),
  m('li').text('如果出现损坏文件，是硬盘有故障的征兆，建议检查硬盘健康情况，严重时请考虑更换硬盘。'),
]));

const Navbar = {
  view: () => m('nav').addClass('navbar navbar-light bg-light').append([
    m('div').addClass('container-fluid').append([
      m('a').attr({title:'back to home',href:'/light/home',type:'button'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-arrow-left')),
      m('span').addClass('PageTitle navbar-brand').append([
        '主仓库信息', ' ', m(InfoBtn),    
      ]),
      m('a').attr({title:'backup',type:'button',href:'/light/backup'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-arrow-right')),
    ]),
  ]),
};

const BucketLocation = cc('span');
const LastChecked = cc('span');
const LastBackup = cc('span');
const TotalSize = cc('span');
const AllFilesCount = cc('span');
const DamagedFilesCount = cc('span');
const ForceCheckBtn = cc('button');
const ForceCheckLoading = cc('span');
const SearchBtn = cc('a');

const InfoArea = cc('div', null, [
  create_item('仓库地址', m(BucketLocation)),
  create_item('上次校验时间', [
    m(LastChecked), ' ',
    m(ForceCheckBtn).attr({type:'button'}).addClass('btn btn-sm btn-outline-secondary').append([
      'force check ',
      m(ForceCheckLoading).addClass('spinner-border spinner-border-sm')
        .attr({role:'status', 'aria-hidden':'true'}).hide(),
    ]),
  ]),
  create_item('上次备份时间', [
    m(LastBackup), ' ',
    m('a').text('backup now').attr({type:'button',href:'/light/backup'})
        .addClass('btn btn-sm btn-outline-secondary'),
  ]),
  create_item('占用空间', m(TotalSize)),
  create_item('全部文件', [m(AllFilesCount), ' (个)']),
  create_item('其中损坏文件', [
    m(DamagedFilesCount),
    ' (个) ',
    m(SearchBtn).text('search').attr({type:'button',href:'/light/search?filter=damaged'})
        .addClass('btn btn-sm btn-outline-secondary').hide(),
  ]),
]);

$('#root').append([
  m(Navbar).addClass('mt-2 mb-5'),
  m(InfoMsg).hide(),
  m(Loading),
  m(Alerts),
  m(InfoArea).hide(),
  m(BottomLine),
]);

init()

function init() {
  $(ForceCheckBtn.id).click(() => {
    Alerts.insert('info', '强制校验文件完整性......');
    const longTime = window.setTimeout(() => {
      Alerts.insert('info', '如果文件较多或U盘/硬盘速度慢，可能需要等待数分钟。');
    }, 3000);
    $(ForceCheckLoading.id).show();
    disable(ForceCheckBtn.id);
    ajax({method:'GET',url:'/api/force-check-files',alerts:Alerts},
        () => {
          Alerts.insert('info', '校验完成时会自动刷新页面，请耐心等待。');
          window.setTimeout(() => {window.location.reload()}, 5000);
        }, () => {
          // onError
          window.clearTimeout(longTime);
          enable(ForceCheckBtn.id);
          $(ForceCheckLoading.id).hide();
        });
  });

  ajax({method:'GET',url:'/api/get-db-info',alerts:Alerts},
      (info) => {
        $(InfoArea.id).show();
        $(BucketLocation.id).text(info.BucketLocation);
        const lastChecked = info.LastChecked ? 
            dayjs.unix(info.LastChecked).format('MMMM D, YYYY') : 'not yet';
        const lastBackup = info.LastBackup ? 
            dayjs.unix(info.LastBackup).format('MMMM D, YYYY') : 'not yet';
        $(LastChecked.id).text(lastChecked);
        $(LastBackup.id).text(lastBackup);
        $(TotalSize.id).text(fileSizeToString(info.TotalSize));
        $(AllFilesCount.id).text(info.AllFilesCount);
        $(DamagedFilesCount.id).text(info.DamagedFilesCount);
        if (info.DamagedFilesCount > 0) {
          $(DamagedFilesCount.id).addClass('text-danger fw-bold');
          $(SearchBtn.id).show();
        }
      }, null, () => { Loading.hide() });
}

function create_item(left, right) {
  return m('div').addClass('row my-3').append([
    m('div').addClass('col-3 text-end fw-bold').append(left),
    m('div').addClass('col').append(right),
  ]);
}

</script>
</body>
</html>